(function () {
    // Initialize the variable that store the objects.
    var overrideCtx = {};
    overrideCtx.Templates = {};

    var appWeburl = decodeURIComponent(getQueryStringParameter("SPAppWebUrl"));

    // Override the default title with user input
    // ctx.ListTitle = prompt("Type a title", ctx.ListTitle);
    loadjscssfile(appWeburl + "/css/style.css", "css") ////dynamically load and add this .css file
    loadjscssfile(appWeburl + "/css/anythingslider.css", "css") ////dynamically load and add this .css file
    loadjscssfile(appWeburl + "/css/orange.css", "css") ////dynamically load and add this .css file

    // Assign functions or plain html strings to the templateset objects:
    // header, footer and item.
    overrideCtx.Templates.Header  = "<article id='anything-slider'><div class='shadow-top'></div>";
    overrideCtx.Templates.Header += "<section id='slider-container'><ul id='slides'>";

    // This template is assigned to the CustomItem function.
    overrideCtx.Templates.Item = customItem;

    overrideCtx.Templates.Footer = "</ul></section><div class='shadow-bottom'></div></article>";

    // Set the template to the:
    //  Custom list definition ID
    //  Base view ID
    overrideCtx.BaseViewID = 2;
    overrideCtx.ListTemplateType = 10057;

    // Assign a function to handle the
    // PreRender and PostRender events
    overrideCtx.OnPreRender = preRenderHandler;
    overrideCtx.OnPostRender = postRenderHandler;

    // Register the template overrides'
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

// This function builds the output for the item template,
// it uses the context object to access announcement data.
function customItem(ctx) {

    // Build a listitem entry for every announcement in the list.
    var ret = "<li class='panel1'>";
    ret += "<section class='slide-elements'>";
    //ret += "<div class='slide-img-container'>";
    //ret += "<img src='img/slider/slider.jpg' alt='Slider Image 1'>";
    //ret += "<div class='slider-img-shadow'></div></div>";
    ret += "<h3>" + ctx.CurrentItem.Title + "</h3>";
    ret += "<p>" + ctx.CurrentItem.Body + "</p>";
    ret += "</section></li>";

    return ret;

}

// The preRenderHandler handles the 
// OnPreRender event
function preRenderHandler(ctx) {


}

// The postRenderHandler handles the OnPostRender event
function postRenderHandler(ctx) {

    // You can manipulate the DOM
    // in the postRender event
    var ulObj;
    var i, j;

    ulObj = document.getElementById("slides");

    // Reverse order the list
    for (i = 1; i < ulObj.children.length; i++) {
        var x = ulObj.children[i];
        for (j = 1; j < ulObj.children.length; j++) {
            var y = ulObj.children[j];
            if (x.innerText < y.innerText) {
                ulObj.insertBefore(y, x);
            }
        }
    }
}

function loadjscssfile(filename, filetype) {
    if (filetype == "js") { //if filename is a external JavaScript file
        var fileref = document.createElement('script')
        fileref.setAttribute("type", "text/javascript")
        fileref.setAttribute("src", filename)
    }
    else if (filetype == "css") { //if filename is an external CSS file
        var fileref = document.createElement("link")
        fileref.setAttribute("rel", "stylesheet")
        fileref.setAttribute("type", "text/css")
        fileref.setAttribute("href", filename)
    }
    if (typeof fileref != "undefined")
        document.getElementsByTagName("head")[0].appendChild(fileref)
}

// Function to retrieve a query string value.
// For production purposes you may want to use
//  a library to handle the query string.
function getQueryStringParameter(paramToRetrieve) {
    var params = document.URL.split("?")[1].split("&");
    var strParams = "";
    for (var i = 0; i < params.length; i = i + 1) {
        var singleParam = params[i].split("=");
        if (singleParam[0] == paramToRetrieve)
            return singleParam[1];
    }
}
